import React, { Component } from 'react';
import { Icon } from 'antd';
import style from './index.less';
class PopContainer extends Component {
  constructor(props) {
    super(props);
    this.windowH = document.body.clientHeight;
    this.windowW = document.body.clientWidth;
    this.state = {
      styleTop: 20,
      styleLeft: 10,
      styleHeight: props.height || this.windowH * 0.85,
      styleWidth: props.width || this.windowW * 0.45,
    };
  } //计算是否超出屏幕

  InWindow = (left, top, startPosX, startPosY) => {
    let H = document.body.clientHeight;
    let W = document.body.clientWidth;
    if (
      (left < 20 && startPosX > left) ||
      (left > W - 20 && startPosX < left) ||
      (top < 20 && startPosY > top) ||
      (top > H - 20 && startPosY < top)
    ) {
      return false;
    }
    return true;
  };
  onMouseDown = (e: any) => {
    e.preventDefault();

    let startPosX = e.clientX;
    let startPosY = e.clientY;
    const { styleLeft, styleTop } = this.state;

    // clientX 鼠标位置
    document.body.onmousemove = (e) => {
      //获取body的页面可视宽高
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let clientWidth =
        document.documentElement.clientWidth || document.body.clientWidth;

      let left = e.clientX - startPosX + styleLeft;
      let top = e.clientY - startPosY + styleTop;
      if (top < 0 || top == 0) {
        top = 0;
      }
      if (left < 0 || left == 0) {
        left = 0;
      }

      let widthbox = this.refs.textInput.offsetWidth; // 盒子的宽度

      // if (this.InWindow(e.clientX, e.clientY, startPosX, startPosY)) {
      //   this.setState({
      //     styleLeft: left,
      //     styleTop: top,
      //   });
      // } else {
      //   document.body.onmousemove = null;
      //   document.body.onmouseup = null;
      // }

      this.setState({
        styleLeft: left,
        styleTop: top,
      });
    };
    document.body.onmouseup = function () {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
    };
  };
  textInput = React.createRef();
  render() {
    const { styleLeft, styleTop, styleHeight, styleWidth } = this.state;
    const { visible, onClose, children, bodyStyle, title } = this.props;
    return (
      <>
        {/* <div className={style.boss}> */}
        <div>
          <div
            ref="textInput"
            className={style.popContainer}
            style={{
              display: visible ? 'block' : 'none',
              left: styleLeft + 'px',
              top: styleTop + 'px',
            }}
          >
            <div className={style.header}>
              <div className={style.title} onMouseDown={this.onMouseDown}>
                {title}
              </div>
              <span className={style.close} onClick={onClose}>
                <Icon type="close" />
              </span>
            </div>
            <div className={style.content} style={{ ...bodyStyle }}>
              {children}
            </div>
            <div className={style.footer}></div>
          </div>
        </div>
      </>
    );
  }
}

export default PopContainer;
